<template>
  <div class="container">
    <div class="input-group">
      <label for="longitude">经度（108.5°E-119°E）:</label>
      <input
        id="longitude"
        type="text"
        v-model="longitude"
        @blur="validateLongitude"
      />
      <span v-if="!validLongitude && longitude !== ''" class="error-msg"
        >经度输入不正确</span
      >
    </div>

    <div class="input-group">
      <label for="latitude">纬度（18.2°N-27°N）:</label>
      <input
        id="latitude"
        type="text"
        v-model="latitude"
        @blur="validateLatitude"
      />
      <span v-if="!validLatitude && latitude !== ''" class="error-msg"
        >纬度输入不正确</span
      >
    </div>

    <div class="input-group">
      <label for="temperature">温度（-15~45℃）:</label>
      <input
        id="temperature"
        type="text"
        v-model="temperature"
        @blur="validateTemperature"
      />
      <span v-if="!validTemperature && temperature !== ''" class="error-msg"
        >温度输入不正确</span
      >
    </div>

    <div class="input-group">
      <label for="humidity">湿度（0-100%）:</label>
      <input
        id="humidity"
        type="text"
        v-model="humidity"
        @blur="validateHumidity"
      />
      <span v-if="!validHumidity && humidity !== ''" class="error-msg"
        >湿度输入不正确</span
      >
    </div>

    <div class="input-group">
      <label for="windSpeed">风速（0-25m/s）:</label>
      <input
        id="windSpeed"
        type="text"
        v-model="windSpeed"
        @blur="validateWindSpeed"
      />
      <span v-if="!validWindSpeed && windSpeed !== ''" class="error-msg"
        >风速输入不正确</span
      >
    </div>

    <div class="input-group">
      <label for="visibility">能见度（0-10km）:</label>
      <input
        id="visibility"
        type="text"
        v-model="visibility"
        @blur="validateVisibility"
      />
      <span v-if="!validVisibility && visibility !== ''" class="error-msg"
        >能见度输入不正确</span
      >
    </div>

    <div class="input-group">
      <label for="pressure">气压（800-1200hPa）:</label>
      <input
        id="pressure"
        type="text"
        v-model="pressure"
        @blur="validatePressure"
      />
      <span v-if="!validPressure && pressure !== ''" class="error-msg"
        >气压输入不正确</span
      >
    </div>

    <div class="input-group">
      <label for="windDirection">风向（0-360°）:</label>
      <input
        id="windDirection"
        type="text"
        v-model="windDirection"
        @blur="validateWindDirection"
      />
      <span v-if="!validWindDirection && windDirection !== ''" class="error-msg"
        >风向输入不正确</span
      >
    </div>

    <div class="input-group">
      <label for="degree">degree（10-19）:</label>
      <input id="degree" type="text" v-model="degree" @blur="validateDegree" />
      <span v-if="!validDegree && degree !== ''" class="error-msg"
        >degree输入不正确</span
      >
    </div>
  </div>
  <button @click="confirmInput" class="confirm-btn">确认</button>
</template>

<script>
import { mapState, mapMutations } from "vuex";

export default {
  data() {
    // 这里的数据可以在store.js中获取到
    // 优先从vuex中获取
    return {
      longitude: "",
      latitude: "",
      temperature: "",
      humidity: "",
      windSpeed: "",
      visibility: "",
      pressure: "",
      windDirection: "",
      degree: "",
      validLongitude: true,
      validLatitude: true,
      validTemperature: true,
      validHumidity: true,
      validWindSpeed: true,
      validVisibility: true,
      validPressure: true,
      validWindDirection: true,
      validDegree: true,
    };
  },
  computed: {
    ...mapState({
      bxfbData: state => state.bxfbData,
    }),
  },
  methods: {
    ...mapMutations(["updateBxfbData"]),
    // call this method to update bxfbData in store
    updateBxfbDataInStore() {
      this.updateBxfbData({
        // your bxfbData properties
        longitude: this.longitude,
        latitude: this.latitude,
        temperature: this.temperature,
        humidity: this.humidity,
        windSpeed: this.windSpeed,
        visibility: this.visibility,
        pressure: this.pressure,
        windDirection: this.windDirection,
        degree: this.degree,
      });
    },
    validateLongitude() {
      this.validLongitude = /^1(08(\.[5-9]\d*|\.?[0-9]+)?|1[0-8](\.\d+)?|9(\.\d+)?)$/.test(this.longitude);
    },
    validateLatitude() {
      // 确保匹配从18.2到27的浮点数或整数
      this.validLatitude = /^((18(\.[2-9](\d+)?)?)|((19|2[0-6])(\.\d+)?)|27(\.0+)?)$/.test(this.latitude);
    },
    validateTemperature() {
      // 匹配从-15到40的整数或浮点数
      this.validTemperature = /^(-1[0-5]|-?\d(\.\d+)?|[0-3]\d(\.\d+)?|4[0-4](\.\d+)?|45(\.0*)?)$/.test(this.temperature);
    },
    validateHumidity() {
      this.validHumidity = /^(100(\.0+)?|([0-9]|[1-9]\d)(\.\d+)?)$/.test(this.humidity);
    },
    validateWindSpeed() {
      this.validWindSpeed = /^(2[0-5]((\.\d+)?)|1?\d(\.\d+)?)$/.test(this.windSpeed);
    },
    validateVisibility() {
      this.validVisibility = /^(10(\.0+)?|[0-9](\.\d+)?)$/.test(this.visibility);
    },
    validatePressure() {
      this.validPressure = /^(800(\.0+)?|8\d{2}(\.\d+)?|9\d{2}(\.\d+)?|1[0-1]\d{2}(\.\d+)?|1200(\.0+)?)$/.test(this.pressure);
    },
    validateWindDirection() {
      this.validWindDirection = /^([0-9]|\d\d|[1-2]\d\d|3[0-5]\d|360(\.0+)?)$/.test(this.windDirection);
    },
    validateDegree() {
      this.validDegree = /^1[0-9]$/.test(this.degree);
    },

    confirmInput() {
      if (
        this.validLongitude &&
        this.validLatitude &&
        this.validTemperature &&
        this.validHumidity &&
        this.validWindSpeed &&
        this.validVisibility &&
        this.validPressure &&
        this.validWindDirection &&
        this.validDegree
      ) {
        alert("所有输入都有效！");
        this.updateBxfbDataInStore();
      } else {
        alert("某些输入无效，请检查并重试。");
      }
    },
  },
};
</script>

<style>
.container {
  max-width: 600px;
  margin: 20px auto;
  padding: 20px;
  border: 1px solid #ccc;
  border-radius: 8px;
  display: grid;
  justify-items: center;
  align-items: center;
  justify-content: center;
  align-content: center;
  grid-template: (1fr 1fr);
  grid-template-columns: repeat(3, 1fr);
}

.input-group {
  margin-bottom: 20px;
}

.input-group label {
  display: block;
  margin-bottom: 5px;
}

.input-group input {
  width: 100%;
  padding: 8px;
  border: 1px solid #ccc;
  border-radius: 4px;
}

.error-msg {
  color: #ff0000;
  font-size: 14px;
  margin-top: 5px;
}

.confirm-btn {
  padding: 10px 20px;
  background-color: #007bff;
  color: #ffffff;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.confirm-btn:hover {
  background-color: #0056b3;
}
</style>
